<%--
  Created by IntelliJ IDEA.
  User: 王睿雯
  Date: 2025/11/8
  Time: 21:34
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>
<head>
    <title>我的空闲时间</title>
    <style>
        .schedule-table {
            border-collapse: collapse;
            margin: 20px auto;
            box-shadow: 0 2px 8px rgba(0,0,0,0.1);
        }
        .schedule-table th, .schedule-table td {
            border: 1px solid #ddd;
            padding: 15px;
            text-align: center;
            min-width: 100px;
            height: 60px;
        }
        .schedule-table th {
            background-color: #f8f9fa;
            font-weight: bold;
            color: #333;
        }
        .time-slot {
            cursor: pointer;
            transition: all 0.3s ease;
            border-radius: 4px;
            font-weight: bold;
        }
        .time-slot.selected {
            background-color: #28a745;
            color: white;
            transform: scale(1.05);
        }
        .time-slot:hover {
            background-color: #e9ecef;
            transform: scale(1.02);
        }
        .time-slot.selected:hover {
            background-color: #218838;
        }
        .submit-btn {
            display: block;
            margin: 30px auto;
            padding: 12px 30px;
            background-color: #007bff;
            color: white;
            border: none;
            border-radius: 6px;
            cursor: pointer;
            font-size: 16px;
            transition: background-color 0.3s;
        }
        .submit-btn:hover {
            background-color: #0056b3;
        }
        .container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 20px;
        }
        .header {
            text-align: center;
            margin-bottom: 30px;
            color: #333;
        }
    </style>
</head>
<body>
<div class="container">
    <div class="header">
        <h1>选择我的空闲时间</h1>
        <p>点击表格格子选择空闲时间，再次点击取消选择</p>
    </div>

    <table class="schedule-table">
        <tr>
            <th>时间/星期</th>
            <c:forEach var="day" begin="1" end="7">
                <th>${weekdays[day]}</th>
            </c:forEach>
        </tr>

        <c:forEach var="slot" begin="1" end="5">
            <tr>
                <th>${timeSlots[slot]}</th>
                <c:forEach var="day" begin="1" end="7">
                    <td class="time-slot ${scheduleGrid[slot][day] ? 'selected' : ''}"
                        data-weekday="${day}"
                        data-slot="${slot}"
                        onclick="toggleTimeSlot(this, ${day}, ${slot})">
                            ${scheduleGrid[slot][day] ? '✓' : ''}
                    </td>
                </c:forEach>
            </tr>
        </c:forEach>
    </table>

    <button class="submit-btn" onclick="submitSchedule()">提交空闲时间</button>
</div>

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
    // 切换时间选择状态
    function toggleTimeSlot(element, weekday, slotNumber) {
        $.ajax({
            url: '${pageContext.request.contextPath}/schedule/toggle',
            type: 'POST',
            data: {
                weekday: weekday,
                slotNumber: slotNumber
            },
            success: function(response) {
                if (response.success) {
                    if (element.classList.contains('selected')) {
                        element.classList.remove('selected');
                        element.innerHTML = '';
                    } else {
                        element.classList.add('selected');
                        element.innerHTML = '✓';
                    }
                } else {
                    alert(response.message);
                }
            },
            error: function() {
                alert('操作失败，请重试');
            }
        });
    }

    // 提交整个课表
    function submitSchedule() {
        const selections = [];
        document.querySelectorAll('.time-slot').forEach(cell => {
            selections.push({
                weekday: parseInt(cell.dataset.weekday),
                slotNumber: parseInt(cell.dataset.slot),
                selected: cell.classList.contains('selected')
            });
        });

        $.ajax({
            url: '${pageContext.request.contextPath}/schedule/submit',
            type: 'POST',
            contentType: 'application/json',
            data: JSON.stringify({ selections: selections }),
            success: function(response) {
                if (response.success) {
                    alert('空闲时间提交成功！');
                } else {
                    alert('提交失败: ' + response.message);
                }
            },
            error: function() {
                alert('提交失败，请重试');
            }
        });
    }
</script>
</body>
</html>
